<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form :model="table.where" label-width="77px" class="ele-form-search"
               @keyup.enter.native="$refs.table.reload()" @submit.native.prevent>
        <el-row :gutter="15">
          <el-col :md="5" :sm="12">
            <el-form-item label="用户账号:">
              <el-input v-model="table.where.username" placeholder="请输入" clearable/>
            </el-form-item>
          </el-col>
          <el-col :md="6" :sm="12">
            <el-form-item label="登录日期:">
              <el-date-picker v-model="daterange" type="datetimerange" :picker-options="pickerOptions" unlink-panels
                              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                              value-format="yyyy-MM-dd HH:mm:ss" class="ele-fluid" @change="onDateRangeChoose"/>
            </el-form-item>
          </el-col>
          <el-col :md="5" :sm="12">
            <div class="ele-form-actions">
              <el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search" class="ele-btn-icon">查询
              </el-button>
              <el-button @click="exportData" icon="el-icon-download" class="ele-btn-icon">导出</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-data-table ref="table" :config="table" highlight-current-row>
        <template slot-scope="{index}">
          <el-table-column type="index" :index="index" width="45" align="center" fixed="left" show-overflow-tooltip/>
          <el-table-column prop="username" label="账号" sortable="custom" show-overflow-tooltip min-width="110"/>
          <el-table-column prop="nickname" label="用户名" sortable="custom" show-overflow-tooltip min-width="110"/>
          <el-table-column prop="ip" label="IP地址" sortable="custom" show-overflow-tooltip min-width="110"/>
          <el-table-column prop="device" label="设备型号" sortable="custom" min-width="110" show-overflow-tooltip/>
          <el-table-column prop="os" label="操作系统" sortable="custom" min-width="110" show-overflow-tooltip/>
          <el-table-column prop="browser" label="浏览器" sortable="custom" show-overflow-tooltip min-width="110"/>
          <el-table-column prop="operType" label="操作类型" sortable="custom" min-width="110" show-overflow-tooltip>
            <template slot-scope="{row}">
              <el-tag :type="['success','danger','info','warning'][row.operType]" size="mini">
                {{ ['登录成功', '登录失败', '退出登录', '刷新TOKEN'][row.operType] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="comments" label="备注" sortable="custom" show-overflow-tooltip min-width="110"/>
          <el-table-column prop="createTime" label="登录时间" sortable="custom" min-width="110" show-overflow-tooltip>
            <template slot-scope="{row}">{{ row.createTime | toDateString }}</template>
          </el-table-column>
        </template>
      </ele-data-table>
    </el-card>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  name: "SysLoginRecord",
  data() {
    return {
      table: {url: '/sys/loginRecord/page', where: {}},  // 表格配置
      daterange: '',  // 筛选日期范围
      pickerOptions: {  // 日期时间选择器快捷项
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  methods: {
    /* 日期选择改变回调 */
    onDateRangeChoose() {
      if (this.daterange) {
        this.table.where.createTimeStart = this.daterange[0];
        this.table.where.createTimeEnd = this.daterange[1];
      } else {
        this.table.where.createTimeStart = null;
        this.table.where.createTimeEnd = null;
      }
    },
    /* 导出数据 */
    exportData() {
      let array = [['账号', '用户名', 'IP地址', '设备型号', '操作系统', '浏览器', '操作类型', '备注', '登录时间']];
      // 请求查询全部(不分页)的接口
      const loading = this.$loading({lock: true});
      this.$http.get('/sys/loginRecord/page?page=1&limit=2000').then(res => {
        loading.close();
        if (res.data.code === 0) {
          res.data.data.forEach(d => {
            array.push([
              d.username, d.nickname, d.ip,
              d.device, d.os, d.browser,
              ['登录成功', '登录失败', '退出登录', '刷新TOKEN'][d.operType],
              d.comments, this.$util.toDateString(d.createTime)
            ]);
          });
          let sheet = XLSX.utils.aoa_to_sheet(array);
          this.$util.exportSheet(XLSX, sheet, '登录日志');
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    }
  }
}
</script>

<style scoped>

</style>